<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图标按钮示例</title>
</head>
<body>

<div style="display: flex; justify-content: space-around; padding: 20px 20px; background-color: #ffffff;">

    <!-- 摊主信息 -->
    <div id="btn-info" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5pGK5Li75L+h5oGv.png" alt="摊主信息" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">摊主信息</div>
    </div>

    <!-- 摊位预约 -->
    <div id="btn-book" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5pGK5L2N6aKE57qm.png" alt="摊位预约" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">摊位预约</div>
    </div>

    <!-- 我的预约 -->
    <div id="btn-mybook" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5oiR55qE6aKE57qm.png" alt="我的预约" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">我的预约</div>
    </div>

    <!-- 出摊打卡 -->
    <div id="btn-punch" style="display: flex; flex-direction: column; align-items: center; width: 80px; cursor: pointer;">
        <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #F9F9F9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
            <img src="/linglong-api/files/iconfont/image/5Ye65pGK5omT5Y2h.png" alt="出摊打卡" style="width: 36px; height: 36px;">
        </div>
        <div style="font-size: 14px; color: #363A44;">出摊打卡</div>
    </div>

</div>

<!-- JS 事件绑定 -->
<script>
    document.getElementById("btn-info").addEventListener("click", function () {
        alert("点击了 摊主信息");
        // window.location.href = "/info.html";
    });

    document.getElementById("btn-book").addEventListener("click", function () {
        alert("点击了 摊位预约");
        // window.location.href = "/book.html";
    });

    document.getElementById("btn-mybook").addEventListener("click", function () {
        alert("点击了 我的预约");
        // window.location.href = "/mybook.html";
    });

    document.getElementById("btn-punch").addEventListener("click", function () {
        alert("点击了 出摊打卡");
        // window.location.href = "/punch.html";
    });
</script>

</body>
</html>
